
<template>


    <el-form :inline="true" :model="formInline">

        <el-form-item label="姓名">
            <el-input v-model="formInline.employName" />
        </el-form-item>

        <el-form-item label="部门" style="width: 180px;">
            <el-select v-model="formInline.departId" placeholder="请选择" clearable @change="PositionList()">
                <el-option v-for="item in departs" :key="item.departId" :label="item.departName" :value=item.departId />
            </el-select>
        </el-form-item>


        <el-form-item label="职位" style="width: 180px;">
            <el-select v-model="formInline.positionId" placeholder="请选择" clearable>
                <el-option v-for="item in positions" :key="item.positionId" :label="item.positionName"
                    :value="item.positionId" />
            </el-select>
        </el-form-item>

        <el-form-item label="入职日期">
            <el-date-picker v-model="formInline.entryDate" type="date" placeholder="入职日期" clearable />
        </el-form-item>
        <el-form-item label="申请日期">
            <el-date-picker v-model="formInline.applyDate" type="date" placeholder="申请日期" clearable />
        </el-form-item>

        <el-form-item label="审批状态" style="width: 180px;" clearable>
            <el-select v-model="formInline.approvalStatus" placeholder="请选择" clearable>
                <el-option label="待审批" value="1" />
                <el-option label="待提交" value="2" />
                <el-option label="已拒绝" value="3" />
                <el-option label="已同意" value="4" />
            </el-select>
        </el-form-item>


        <el-form-item>
            <el-button type="success" @click="getPromotionList()">查询</el-button>
        </el-form-item>

        <el-form-item>
            <el-button type="danger" @click="tian()">新增</el-button>
        </el-form-item>

    </el-form>




    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="departId" label="部门">
            <template #default="scope">
                <el-tag v-if="scope.row.departId == '1fc9d3a7-5f92-11ef-b493-0242ac110002'">职能部</el-tag>
                <el-tag v-if="scope.row.departId == '70a5d40c-0fa5-4aab-97e9-e419fb757c30'">市场部</el-tag>
                <el-tag v-if="scope.row.departId == '74683c84-de31-4280-bbb7-768afafca281'">财务部</el-tag>
                <el-tag v-if="scope.row.departId == '780bcf11-6214-4271-b3a3-c0517ad57f6d'">人事部</el-tag>
                <el-tag v-if="scope.row.departId == 'b5cf07de-878b-49a5-bb82-aa249a1db83c'">市场部2</el-tag>
                <el-tag v-if="scope.row.departId == 'f6df80ad-3ddd-40da-bcdf-5051657e33a6'">运输部</el-tag>

            </template>


        </el-table-column>
        <el-table-column prop="positionId" label="职位">

            <template #default="scope">
                <el-tag v-if="scope.row.positionId == '39beb76c-65e4-4baf-969a-45cb1cd1950c'">组长</el-tag>
                <el-tag v-if="scope.row.positionId == 'f4992479-c59f-4330-aad1-45fb99bd2894'">经理</el-tag>
                <el-tag v-if="scope.row.positionId == 'fad8a0b5-60f4-11ef-8aa3-0242ac110002'">秘书</el-tag>
            </template>

        </el-table-column>
        <el-table-column prop="employName" label="姓名"></el-table-column>
        <el-table-column prop="entryDate" label="入职日期" format="yyyy-MM-dd"></el-table-column>
        <el-table-column prop="applyDate" label="申请日期" format="yyyy-MM-dd"></el-table-column>
        <el-table-column prop="approvalStatus" label="审批状态">


            <template #default="scope">
                <el-tag type="warning" v-if="scope.row.approvalStatus == 1">待提交</el-tag>
                <el-tag type="info" v-if="scope.row.approvalStatus == 2">待审批</el-tag>
                <el-tag type="success" v-if="scope.row.approvalStatus == 3">已同意</el-tag>
                <el-tag type="danger" v-if="scope.row.approvalStatus == 4">已拒绝</el-tag>
            </template>


        </el-table-column>

        <el-table-column prop="createName" label="创建人"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" format="yyyy-MM-dd HH:mm:ss"></el-table-column>

        <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
                <el-button size="small" type="success" @click="handleEdit(scope.row.promotionId)">
                    查看
                </el-button>

            </template>
        </el-table-column>



    </el-table>

</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()

import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, onMounted } from 'vue';
import axios from '@/api/http';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    employName: [
        { required: true, message: '员工姓名不为空', trigger: 'blur' },
    ],
})

const tableData = ref([])

onMounted(() => {
    getPromotionList()
    DepartList()

})

const formInline = reactive({
    pageIndex: 1,
    pageSize: 5,
    departId: "",
    positionId: "",
    employName: "",
    entryDate: "",
    applyDate: "",
    approvalStatus: 0,
});


//分页条件
const page = reactive({
    totalCount: 0,
    pageCount: 0,
});


const getPromotionList = () => {
    console.log(formInline)
    axios.post('/api/approval/PromotionList', formInline)
        .then((res: any) => {
            console.log(res);
            tableData.value = res.data;
            page.totalCount = res.totalCount;
            page.pageCount = res.pageCount;
        }).catch((err: any) => {
            console.log(err);
        })


}


const dialogVisible = ref(false)

const tian = () => {
    dialogVisible.value = true

}


const form = reactive({

    departId: "",
    positionId: "",
    employName: "",
    responsiblePerson: "",
    entryDate: "",
    applyDate: "",
    summarize: "",
    opinion: "",
    "approvalStatus": 1,
    "approvalPerson": "string",
    "isDelete": 0,
    "createName": "string",
    "createTime": "2024-08-29",
    "updateName": "string",
    "updateTime": "2024-08-29"


})


const departs = ref([])
const DepartList = () => {

    axios.get('/api/promotion/GetDepartMentList')
        .then(function (res) {
            departs.value = res
            console.log(res)
        })
        .catch(function (error) {
            console.log(error);
        })

}




const positions = ref([])
const PositionList = () => {
    positions.value = []
    axios.get('/api/promotion/GetPositionList?departId=' + formInline.departId + '')
        .then(function (res) {
            positions.value = res
            console.log(res)
        })
        .catch(function (error) {
            console.log(error);
        })

}





const handleEdit = (promotionId: number) => {

    router.push({
        path: "/ApprovalLook",
        query: {
            promotionId: promotionId
        }
    })

}


</script>







